<template>
  <a-drawer
    title="目标人列表"
    style="height: 100%"
    :width="500"
    :mask="false"
    placement="left"
    :wrap-style="{ position: 'absolute' }"
    :visible="visible"
    getContainer=".mapBox"
    @close="close"
  >
    <div class="mingwen-table">
      <CustomTable
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        :customRow="clickCustomRow"
        rowKey="id"
        @change="onTableChange"
      >
      </CustomTable>
    </div>
  </a-drawer>
</template>

<script>
// import { skpz } from '@/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: [
        { id: '11', type: 1, phone: '1212121', name: '张三', time: '2020-02-20  17:32:00' },
        { id: '22', type: 2, phone: '1212121', name: '李四', time: '2020-02-20  17:32:00' },
        { id: '33', type: 3, phone: '1212121', name: '王五', time: '2020-02-20  17:32:00' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          // width: 100,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '姓名/代号',
          dataIndex: 'name',
          // width: 110,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '更新时间',
          dataIndex: 'time',
          width: 160,
          scopedSlots: { customRender: 'time' }
        }
      ],
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    refreshTable() {
      this.loading = true
      // alarmApi
      //   .smuWarnConfigList(this.pageFilter)
      //   .then(res => {
      //     if (res.success) {
      //       this.pageData = res.result
      //       this.loading = false
      //       // this.$refs.table.onClearRowKeys()
      //     } else {
      //       this.loading = false
      //     }
      //   })
      //   .catch(e => {
      //     this.loading = false
      //     this.$message.warn('请求失败！')
      //   })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            this.$emit('clickRow', record)
          }
        }
      }
    },
    close(value) {
      this.$emit('close', value)
    }
  }
}
</script>

<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 50%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
    /deep/.ant-col-14 {
      width: 88% !important;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
    }
  }
}
.mingwenBox /deep/.ant-col-5 {
  width: 22.833333%;
}
.mingwen-table /deep/.ant-table-row {
  cursor: pointer;
}
/deep/.ant-drawer-header {
  background-color: #f2f2f2 !important;
}
.btnBox {
  margin: 20px 0;
  overflow: hidden;
  .b1 {
    float: left;
  }
  .b2 {
    float: right;
  }
}
</style>
